<template>
  <div>
    <a-form-model :layout="form.layout" :model="form" v-bind="formItemLayout">
      <!-- <a-form-model-item label="Form Layout">
        <a-radio-group v-model="form.layout"> -->
          <!-- <a-radio-button value="horizontal">
            Horizontal
          </a-radio-button> -->
          <!--          <a-radio-button value="vertical">-->
          <!--            Vertical-->
          <!--          </a-radio-button>-->
          <!--          <a-radio-button value="inline">-->
          <!--            Inline-->
          <!--          </a-radio-button>-->
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="用户名">
        <a-input v-model="username" placeholder="请输入用户名"/>
      </a-form-model-item>
      <a-form-model-item label="密 码">
        <a-input v-model="password" type="password" placeholder="请输入密码"/>
      </a-form-model-item>
      <a-form-model-item label="手机号">
        <a-input v-model="phone" placeholder="请输入手机号"/>
      </a-form-model-item>
      <a-form-model-item label="图形验证码">
        <img @click="update_images" :src="images" alt=""> <span>看不清,点击图片换一张,</span><br>
        <a-input v-model="crossing" text="password" placeholder="请输入验证码"/>

      </a-form-model-item>


      <a-form-model-item :wrapper-col="buttonItemLayout.wrapperCol">
        <a-button @click="sub" type="primary">
          注册
        </a-button>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>
<script>
import axios from 'axios'

export default {
  data() {
    return {
      form: {
        layout: 'horizontal',
      },
      username: '', // 用户名
      password: '', // 密码
      base_url: 'http://127.0.0.1:8000',  // 默认url
      uuid: '', // 存储浏览器标识
      images: '',  // 存储图形验证码图片
      crossing: '', // 验证码v-model,
      phone: '', // 手机号
    };
  },
  methods: {
    // 注册功能
    sub() {
      axios({
        url: this.base_url + '/refresh_captcha/',
        method: 'post',
        data: {
          'username': this.username,
          'password': this.password,
          'crossing': this.crossing,
          'uuid': this.uuid,
          'phone': this.phone
        }
      }).then(res => {
        console.log(res.data)

        if (res.data.code == 10001) {
          alert(res.data.msg)
          this.crossing = ''
        }
        if (res.data.code == 10002) {
          alert(res.data.msg)
        }
        if (res.data.code == 10003) {
          alert(res.data.msg)
        }
        if (res.data.code == 10004) {
          alert(res.data.msg)
        }
        if (res.data.code == 10005) {
          alert(res.data.msg)
        }
        if (res.data.code == 10006) {
          alert(res.data.msg)
          this.phone = ''
        }
      })
    },

    // 刷新
    update_images() {
      axios({
        url: this.base_url + '/createuuid/'
      }).then(res => {
        this.uuid = res.data
        this.images = 'http://127.0.0.1:8000/gender/?id=' + this.uuid
      })
    }

  },
  mounted() {
    //  获取图片验证码
    axios({
      url: this.base_url + '/createuuid/'
    }).then(res => {
      console.log(res.data)
      this.uuid = res.data
      this.images = 'http://127.0.0.1:8000/gender/?id=' + this.uuid
    })
  },
  computed: {
    formItemLayout() {
      const {layout} = this.form;
      return layout === 'horizontal'
        ? {
          labelCol: {span: 4},
          wrapperCol: {span: 6},
        }
        : {};
    },
    buttonItemLayout() {
      const {layout} = this.form;
      return layout === 'horizontal'
        ? {
          wrapperCol: {span: 14, offset: 4},
        }
        : {};
    },
  },
};
</script>
